<!--
 @description
 @fileName NavList.vue
 @author zengqiongying
 @created 2022/12/29 17:15:51
-->
<template>
  <div class="level-nav-list">
    <div v-for="(item,i) in list" :key="i" class="l-item" @click="handleClick(item)">
      <div class="image">
        <ImageVideo :host="host" :src="item.picUrl" fit="fill" />
      </div>
      <div class="cover">
        <div class="name">{{ item.tabName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'TabNavList',
  components: { ImageVideo },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      host: process.env.VUE_APP_STATIC

    }
  },
  methods: {
    handleClick(data) {
      if (data.children && data.children.length) {
        localStorage.setItem('three-nav-list', JSON.stringify(data))
        this.$router.push({
          name: 'GoodsThreeNavList'
        })
      } else {
        data.routerTitle = data.tabName
        this.$gotoPage(data, this.$router)
      }
    }
  }
}

</script>
<style lang='less' scoped>
.level-nav-list{
  padding: 16px 16px 0;
  .l-item{
    margin-bottom: 16px;
    position: relative;
    min-height: 127px;
    max-height:134px ;
    border-radius: 10px;
    overflow: hidden;
    .image{
      width: 100%;
      // height: 127px; // 180px
      height: auto;
    }
    .cover{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index:1;
      width: 100%;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      .name{
        min-width: 101px;
        height: 36px;
        padding: 0 16px;
        box-sizing: border-box;
        line-height: 34px;
        background: rgba(255,255,255,0.2);
        border-radius: 12px;
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
      }
    }

  }
}
</style>
